import { Component, createRef } from "react";
import avatar from "../images/bozai.png";
export default class Form extends Component {
  state = {
    txt: "",
  };

  // 创建ref对象
  txtRef = createRef();

  changeTxt = (e) => {
    // console.log(e.target.value);

    this.setState({
      txt: e.target.value,
    });
  };
  OnAddComment = () => {
    const { txt } = this.state;
    // 非空校验
    if (txt.trim() === "") return;
    // 让文本款获取焦点
    console.log(this.txtRef);
    this.txtRef.current.focus();
    this.props.addComment(txt);
    this.setState({});
  };
  render() {
    return (
      <div className="box-normal">
        {/* 当前用户头像 */}
        <div className="reply-box-avatar">
          <div className="bili-avatar">
            <img className="bili-avatar-img" src={avatar} alt="用户头像" />
          </div>
        </div>
        <div className="reply-box-wrap">
          {/* 评论框 */}
          <textarea
            className="reply-box-textarea"
            placeholder="发一条友善的评论"
            value={this.state.txt}
            onChange={this.changeTxt.bind(this)}
            ref={this.txtRef}
          />
          {/* 发布按钮 */}
          <div className="reply-box-send">
            <div
              className="send-text"
              onClick={() => {
                this.OnAddComment();
              }}
            >
              发布
            </div>
          </div>
        </div>
      </div>
    );
  }
}
